<script setup>
import { ref } from 'vue'
import { getDeptByParent } from '@/api/index'
import TreeDept from "./treeDept.vue";
const props = defineProps({
  data: {
    type: Array,
    default: () => ([])
  }
})
const emits = defineEmits(['change'])
const deptData = ref(props.data)
const queryChildren = () => {
  for (let dept of deptData.value) {
    console.log('dept', dept)
    if (dept.end) continue
    const params = {
      parentid: dept.deptId,
      deptType: 1
    }
    getDeptByParent(params).then(res => {
      dept.children = res.data.map(item => {
        return {
          deptId: item.deptId,
          deptName: item.deptName,
          end: item.end
        }
      })
    })
  }
}
queryChildren()

const obj2StrParams = (obj, firstStr = '?') => {
  let params = firstStr
  for (let p in obj) {
    params += p + "=" + obj[p] + "&"
  }
  return params.substring(0, params.length - 1)
}

const handleChange = (dept) => {
  console.log('dept', dept)
  // emits('change', dept)
  const obj = {
    deptId: dept.deptId
  }
  // form.value.deptName = dept.deptName
  const params = obj2StrParams(obj)
  console.log('params', params)
  uni.navigateTo({
    url: '/pages/tasks/index' + params
  })
}
</script>

<template>
  <view v-for="(item, index) in deptData" :key="item.deptId" class="node-item">
    <view class="dept-name" @click="handleChange(item)">{{ item.deptName }}</view>
    <tree-dept v-if="item?.children?.length" :data="item.children"></tree-dept>
  </view>
</template>

<style scoped lang="scss">
.node-item{padding: 5px 0px 5px 20px;}
.dept-name{background: #f3f3f3;padding: 5px 20px;border-radius: 5px;}
.loading{display: flex;justify-content: center;align-items: center;}
</style>
